<template>
    <div>
        {{ d.num.toFixed(deLen) }}
    </div>
</template>
<script setup>
import { reactive, watch } from 'vue'
import gsap from 'gsap'

const props = defineProps({
    value:{
        type: Number,
        default: 0
    }
})

const d = reactive({
    num:0
})

const toValue = () => {
    gsap.to(d, {
        duration:0.5,
        num: props.value
    })
}
const getDeLen = (num) => {
    let numStr = num.toString()
    if (numStr.includes('.')) {
        // 获取小数点后的字符串长度
        return numStr.split('.')[1].length;
    }
    // 如果没有小数点，则返回0
    return 0;
}

const deLen = getDeLen(props.value)

toValue()

watch(()=> props.value, ()=>toValue())

</script>